<template>
<!-- 平台吞吐量/响应时间 -->
    <div class="throughput-response-time-wrap">
        <div class="model-title">{{ modelType == 1 ? '平台吞吐量' : '平台响应时间' }}</div>
        <!-- 码表 -->
        <div :id="gaugeDomId" class="stopwatch-wrap"></div>
        <!-- 折线图 -->
        <div :id="polylineDomId" class="polyline-wrap"></div>
    </div>
</template>
<script>
import utils from '@/utils/util'
import { getPlatformthroughput, getPlatformResponseTime } from '@/api/platMonitor'

let Echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/gauge");
require("echarts/lib/chart/line");
require("echarts/lib/component/tooltip");

export default {
    name: 'ThroughputOrResponseTime',
    props: {
        type: {
            default() {
                return 1;
            }
        }
    },
    data() {
        return {
            modelType: this.type, // 类型：1-吞吐量  2-响应时间
            gaugeDomId: this.type == 1 ? 'throughputGaugeEchart' : 'responseTimeGaugeEchart',
            polylineDomId: this.type == 1 ? 'throughputPolylineEchart' : 'responseTimePolylineEchart',
            unit: this.type == 1 ? '次/分' : '毫秒/次',
        }
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            if(this.modelType == 1) {
                this.getThroughputData()
            } else {
                this.getResponseTime()
            }
        },
        // 获取平台吞吐量
        getThroughputData() {
            let that = this
            let parames = {
                startTime: utils.ilinkTimeformat.hoursAgo(12, 'yyyy-MM-dd hh:mm:ss'),
                endTime: utils.ilinkTimeformat.format(new Date(), 'yyyy-MM-dd hh:mm:ss')
            }
            getPlatformthroughput(parames).then(res => {
                if(res.status === 200 && res.data && res.data.length > 0) {
                    let xAxisData = []
                    let yAxisData = []
                    let maxValue = 0
                    // 数据过滤，或者x、y轴数据和最大值
                    for(let i=0, len=res.data.length; i < len; i++) {
                        xAxisData.unshift(res.data[i].nowTime)
                        yAxisData.unshift(res.data[i].throughput)
                        if(res.data[i].throughput > maxValue) {
                            maxValue =  Math.ceil(res.data[i].throughput * 1.1)
                        }
                    }
                    // 渲染图表
                    this.$nextTick(() => {
                        this.renderGaugeEchart(res.data[0].throughput, maxValue)
                        this.renderPolyLineEchart(xAxisData, yAxisData, maxValue)
                    })
                }
            })
        },
        // 获取平台响应时间
        getResponseTime() {
            let that = this
            let parames = {
                startTime: utils.ilinkTimeformat.hoursAgo(12, 'yyyy-MM-dd hh:mm:ss'),
                endTime: utils.ilinkTimeformat.format(new Date(), 'yyyy-MM-dd hh:mm:ss')
            }
            getPlatformResponseTime(parames).then(res => {
                if(res.status === 200 && res.data && res.data.length > 0) {
                    let xAxisData = []
                    let yAxisData = []
                    let maxValue = 0
                    // 数据过滤，或者x、y轴数据和最大值
                    for(let i=0, len=res.data.length; i < len; i++) {
                        xAxisData.unshift(res.data[i].nowTime)
                        yAxisData.unshift(res.data[i].avgAnalyticalCostTime)
                        if(res.data[i].avgAnalyticalCostTime > maxValue) {
                            maxValue =  Math.ceil(res.data[i].avgAnalyticalCostTime * 1.1)
                        }
                    }
                    // 渲染图表
                    this.$nextTick(() => {
                        this.renderGaugeEchart(res.data[0].avgAnalyticalCostTime, maxValue)
                        this.renderPolyLineEchart(xAxisData, yAxisData, maxValue)
                    })
                }
            })
        },
        // 根据报警总数比例显示表盘颜色
        colorFormatOnChart(value,max) {
            let blueColorList = [[[0.1,"#60f1ff"],[1,"#464646"]],[[0.1,"#60f1ff"],[0.2,"#61ecff"],[1,"#464646"]],[[0.1,"#60f1ff"],[0.2,"#61ecff"],[0.3,"#4bcfff"],[1,"#464646"]],[[0.1,"#60f1ff"],[0.2,"#61ecff"],[0.3,"#4bcfff"],[0.4,"#40bfff"],[1,"#464646"]],[[0.1,"#60f1ff"],[0.2,"#61ecff"],[0.3,"#4bcfff"],[0.4,"#40bfff"],[0.5,"#35aeff"],[1,"#464646"]],[[0.1,"#60f1ff"],[0.2,"#61ecff"],[0.3,"#4bcfff"],[0.4,"#40bfff"],[0.5,"#35aeff"],[0.6,"#2b9dff"],[1,"#464646"]],[[0.1,"#60f1ff"],[0.2,"#61ecff"],[0.3,"#4bcfff"],[0.4,"#40bfff"],[0.5,"#35aeff"],[0.6,"#2b9dff"],[0.7,"#208cff"],[1,"#464646"]],[[0.1,"#60f1ff"],[0.2,"#61ecff"],[0.3,"#4bcfff"],[0.4,"#40bfff"],[0.5,"#35aeff"],[0.6,"#2b9dff"],[0.7,"#208cff"],[0.8,"#157cff"],[1,"#464646"]],[[0.1,"#60f1ff"],[0.2,"#61ecff"],[0.3,"#4bcfff"],[0.4,"#40bfff"],[0.5,"#35aeff"],[0.6,"#2b9dff"],[0.7,"#208cff"],[0.8,"#157cff"],[0.9,"#0b6bff"],[1,"#464646"]],[[0.1,"#60f1ff"],[0.2,"#61ecff"],[0.3,"#4bcfff"],[0.4,"#40bfff"],[0.5,"#35aeff"],[0.6,"#2b9dff"],[0.7,"#208cff"],[0.8,"#157cff"],[0.9,"#0b6bff"],[1,"#005aff"]]]
            let yellowColorList = [[[0.1,"#ffd42a"],[1,"#464646"]],[[0.1,"#ffd42a"],[0.2,"#ffc225"],[1,"#464646"]],[[0.1,"#ffd42a"],[0.2,"#ffc225"],[0.3,"#ffb021"],[1,"#464646"]],[[0.1,"#ffd42a"],[0.2,"#ffc225"],[0.3,"#ffb021"],[0.4,"#ff9d1c"],[1,"#464646"]],[[0.1,"#ffd42a"],[0.2,"#ffc225"],[0.3,"#ffb021"],[0.4,"#ff9d1c"],[0.5,"#ff8b17"],[1,"#464646"]],[[0.1,"#ffd42a"],[0.2,"#ffc225"],[0.3,"#ffb021"],[0.4,"#ff9d1c"],[0.5,"#ff8b17"],[0.6,"#ff7913"],[1,"#464646"]],[[0.1,"#ffd42a"],[0.2,"#ffc225"],[0.3,"#ffb021"],[0.4,"#ff9d1c"],[0.5,"#ff8b17"],[0.6,"#ff7913"],[0.7,"#ff670e"],[1,"#464646"]],[[0.1,"#ffd42a"],[0.2,"#ffc225"],[0.3,"#ffb021"],[0.4,"#ff9d1c"],[0.5,"#ff8b17"],[0.6,"#ff7913"],[0.7,"#ff670e"],[0.8,"#ff5409"],[1,"#464646"]],[[0.1,"#ffd42a"],[0.2,"#ffc225"],[0.3,"#ffb021"],[0.4,"#ff9d1c"],[0.5,"#ff8b17"],[0.6,"#ff7913"],[0.7,"#ff670e"],[0.8,"#ff5409"],[0.9,"#ff4205"],[1,"#464646"]],[[0.1,"#ffd42a"],[0.2,"#ffc225"],[0.3,"#ffb021"],[0.4,"#ff9d1c"],[0.5,"#ff8b17"],[0.6,"#ff7913"],[0.7,"#ff670e"],[0.8,"#ff5409"],[0.9,"#ff4205"],[1,"#ff3000"]]]
            let ColorList = []
            
            if(this.modelType == 1) {
                ColorList.push.apply(ColorList, blueColorList)
            } else {
                ColorList.push.apply(ColorList, yellowColorList)
            }
            
            if (value/max < 0.15) {
                return ColorList[0]
            } else if (value / max < 0.25) {
                return ColorList[1]
            } else if (value / max < 0.35) {
                return ColorList[2]
            } else if (value / max < 0.45) {
                return ColorList[3]
            } else if (value / max < 0.55) {
                return ColorList[4]
            } else if (value / max < 0.65) {
                return ColorList[5]
            } else if (value / max < 0.75) {
                return ColorList[6]
            } else if (value / max < 0.85) {
                return ColorList[7]
            } else if (value / max < 0.95) {
                return ColorList[8]
            } else if (value / max >= 0.95) {
                return ColorList[8]
            }
        },
        // 渲染码表
        renderGaugeEchart(value, maxValue) {
            let that = this
            let domId = that.gaugeDomId
            let option = {
                series: [
                    {
                        name: '统计',
                        type: 'gauge',
                        splitNumber: 18, //刻度数量
                        min: 0,
                        max: maxValue,
                        radius: '160%', //图表尺寸
                        center: ['50%', '92%'],
                        startAngle: 170,//刻度起始
                        endAngle: 10,//刻度结束
                        axisLine: {
                            show: false,
                            lineStyle: {
                                width: 0,
                                shadowBlur: 0,
                                color: that.colorFormatOnChart(value, maxValue)
                            }
                        },
                        axisTick: {
                            show: true,
                            lineStyle: {
                                color: 'auto',
                                width: 2
                            },
                            length: 35,
                            splitNumber: 2
                        },
                        splitLine: {
                            show: false,
                            length: 22,
                            lineStyle: {
                                color: 'auto',
                            }
                        },
                        axisLabel: {
                            show: false
                        },
                        pointer: { //仪表盘指针
                            show: 0,
                            length: '80%',
                            width: 2
                        },
                        title: {
                            show: true,
                            offsetCenter: [0, '-10%'], // x, y，单位px
                            textStyle: {
                                color: 'rgba(255,255,255,.5)',
                                fontSize: 16
                            }
                        },
                        detail: {
                            borderColor: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 2,
                            offsetCenter: [0, '-30%'], // x, y，单位px
                            textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color: '#fff',
                                fontSize: 36,
                            },
                            formatter: '{value}'
                        },
                        data: [{
                            name: that.unit,
                            value: value // 值
                        }]
                    },
                    {
                        name: "刻度文字",
                        type: "gauge",
                        radius: "140%",
                        center: ['50%', '82%'],
                        startAngle: 185, //刻度起始
                        endAngle: -5, //刻度结束
                        min: 0,
                        max: maxValue,
                        splitNumber: 2,
                        z: 4,
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false,
                            length: 0, //刻度节点线长度
                        },
                        axisLabel: {
                            color: 'rgba(255,255,255,.2)',
                            fontSize: 14,
                            distance: -20,
                        }, //刻度节点文字颜色
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                opacity: 0
                            }
                        },
                        detail: {
                            show: false
                        },
                        data: [{
                            value: 0,
                            name: ""
                        }]
                    }
                ]
            }

            Echarts.init(
                document.getElementById(domId)
            ).setOption(option);
        },
        // 渲染折线图
        renderPolyLineEchart(xAxisData, yAxisData, maxValue) {
            let that = this
            let domId = that.polylineDomId
            let option = {
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b}<br />{c}' + that.unit
                },
                grid: {
                    show: true,
                    left: '11%',
                    top: 10,
                    bottom: 20,
                    borderColor: 'rgba(97,186,242,.1)'
                },
                xAxis: [{
                    type: 'category',
                    data: xAxisData,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(97,186,242,.1)'
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,.1)"
                        }
                    },
                    axisTick: {
                        show: false,
                        alignWithLabel: true
                    },
                }],
                yAxis: [{
                    type: 'value',
                    splitNumber: 4,
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(97,186,242,.1)'
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(97,186,242,.1)"
                        },
                    },
                    axisTick: {
                        show: false  
                    },
                    splitArea: {
                        show: false
                    }
                }],
                series: [{
                    name: that.modelType == 1 ? '吞吐量' : '响应时间',
                    type: 'line',
                    data: yAxisData,
                    lineStyle: {
                        normal: {
                            width: 2,
                            color: that.modelType == 1 ? '#17D6E8' : '#CFDB13'
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#61BAF2',
                            borderWidth: 0,
                            borderColor: "#61BAF2"
                        }
                    },
                    smooth: true
                }]
            }

            Echarts.init(
                document.getElementById(domId)
            ).setOption(option);
        }
    }
}
</script>
<style lang="scss" scoped>
.throughput-response-time-wrap {
    width: 100%;
    height: 100%;
    .stopwatch-wrap {
        width: 100%;
        height: 53%;
    }
    .polyline-wrap {
        width: 100%;
        height: 40%;
    }
}
</style>
